import React, { useEffect, useRef, useState} from 'react';
import { Image, Row, Col, Card, Button, List } from "antd";
import { DownloadOutlined } from "@ant-design/icons";

import VirtualList from 'rc-virtual-list';

import ProAutoScrollbars from "vendor/components/pro-autoScrollbars";
import ProBox from "vendor/components/pro-box";
import prompt from "vendor/utils/prompt";
import AiSnapshotRender, { AiSnapshotRenderBox } from "@/components/AiSnapshotRender";
import { type RespDataType, type RequestDataType, hdlApiDomain, getImageList, downloadImg } from "./api"

import Filter from "./Filter";

const ImagePreview: React.FC = () => {
    const { imagePreviewGroupRef, imageContainerRef, imageContainerHeight, loading,  previewIdx, setPreviewIdx,previewVisible, setPreviewVisible, imageList, fetchImageList, imagePathList } = useImagePreview();
    const rowHeight = 600;
    const color = "rgba(248,248,4,0.5)";
    return <div className="h-full flex flex-col">
        <Filter fetchImageList={fetchImageList}/>
        <div className="flex-grow relative" style={{height: 0}} ref={imageContainerRef}>
            <ProAutoScrollbars>
                <ProBox loading={loading || imageContainerHeight == 0} isNoData={!loading && imageList.length == 0}>
                    <List style={{overflowX: "hidden"}}>
                        <VirtualList
                            data={imageList}
                            height={imageContainerHeight}
                            itemHeight={47}
                            itemKey="snapId"
                            // onScroll={onScroll}
                        >
                            {(item: RespDataType.ImageItem, index) => {
                                const imageUrl = item?.path
                                return <Card
                                    hoverable
                                    style={{ height: rowHeight, }}
                                    bodyStyle={{padding:0}}
                                    // cover={<Image
                                    //     // width="100%"
                                    //     height={rowHeight - 50}
                                    //     src={imageUrl}
                                    //     // style={{borderRadius: 10}}
                                    //     preview={false}
                                    //     onClick={() => {
                                    //         // setPreviewIdx(index);
                                    //         // setPreviewVisible(true);
                                    //         if(imagePreviewGroupRef.current) {
                                    //             imagePreviewGroupRef.current.setPreviewIdx(index);
                                    //             imagePreviewGroupRef.current.setPreviewVisible(true);
                                    //         }
                                    //     }}
                                    //     placeholder={
                                    //         <Image
                                    //             preview={false}
                                    //             src={`${imageUrl}?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200`}
                                    //             width="100%"
                                    //             height="100%"
                                    //         />
                                    //     }
                                    // />}
                                    cover={<div className="flex items-center justify-center" style={{height: rowHeight - 50, width: "100%"}}>
                                        {/*<AiSnapshotRender*/}
                                        {/*    imageUrl={imageUrl}*/}
                                        {/*    aiSnapshotDesc={""}*/}
                                        {/*/>*/}
                                        <AiSnapshotRenderBox
                                            imageUrl={imageUrl}
                                            box={item.box}
                                        />
                                    </div>}
                                >
                                    <Row gutter={15} align="middle">
                                        <Col className="text-right" >
                                            序号：<span style={{color}}>{index + 1}</span>
                                        </Col>
                                        <Col className="text-right">
                                            订单号：<span style={{color}}>{item.orderId}</span>
                                        </Col>
                                        <Col className="text-right" >
                                            桌号：<span style={{color}}>{item.tableNum}</span>
                                        </Col>
                                        <Col className="text-right">
                                            状态：<span style={{color}}>{item.status}</span>
                                        </Col>
                                    </Row>
                                    <Row gutter={25} align="middle">
                                        <Col className="text-right">
                                            快照时间：<span style={{color}}>{item.aiTime}</span>
                                        </Col>
                                        <Col className="text-right">
                                            下锅底时间：<span style={{color}}>{item.potTime}</span>
                                        </Col>
                                        <Col className="text-right">
                                            下菜时间：<span style={{color}}>{item.dishTime}</span>
                                        </Col>
                                        <Col className="text-right">
                                            结账时间：<span style={{color}}>{item.settelTime}</span>
                                        </Col>
                                        <Col className="text-right">
                                            {/*<DownloadImgBtn imgUrl={"https://aidata.aiosfans.com:9443/30528/proxy/ipCameraVideoAlert/aiSnapshot/query/bfc71d186902edda45d712c16f93214a/2023-07-20/1f63169a322778af35ccf27de2e5d663/2023-07-20_20-16-12_orig.jpg?sk_secret=27c55f7d5b4115eec9227e4f6818695e"}/>*/}
                                            <DownloadImgBtn imgUrl={imageUrl}/>
                                        </Col>
                                    </Row>
                                </Card>
                            }}
                        </VirtualList>
                    </List>
                </ProBox>
            </ProAutoScrollbars>
        </div>
    </div>
}

export default ImagePreview;

const useImagePreview = () => {
    const [ loading, setLoading ] = useState(false);
    const [ previewVisible, setPreviewVisible ] = useState(false);
    const [ previewIdx, setPreviewIdx ] = useState(0);
    const [ imageList, setImageList ] = useState<RespDataType.ImageList>([]);
    const [ imagePathList, setImagePathList ] = useState<string[]>([]);
    const [ imageContainerHeight, setImageContainerHeight ] = useState<number>(0);
    const imagePreviewGroupRef = useRef<ImagePreviewGroupRef>()
    const imageContainerRef = useRef<HTMLDivElement>()

    useEffect(() => {
        setImageContainerHeight(imageContainerRef.current.clientHeight);
    }, [])

    const fetchImageList = (filter?: RequestDataType.GetImageListParams) => {
        // setImageList([])
        // setImagePathList([])
        setLoading(true);
        getImageList(filter || {}).then((resp) => {
            setImageList(resp.data);
            setImagePathList(resp.data.map(item => item.path));
            setLoading(false);
        });
    }

    return { imagePreviewGroupRef, imageContainerRef, imageContainerHeight, loading, previewIdx,previewVisible, setPreviewVisible, setPreviewIdx,imageList, fetchImageList, imagePathList }
}


interface ImagePreviewGroupRef{
    setPreviewVisible: (value: boolean) => void;
    setPreviewIdx: (value: number) => void;
}

const DownloadImgBtn: React.FC<{imgUrl: string}> = ({imgUrl}) => {
    const [ loading, setLoading ] = useState(false);
    return <Button
        size="small"
        type="primary"
        icon={<DownloadOutlined />}
        loading={loading}
        disabled={!imgUrl}
        onClick={() => {
            setLoading(true);
            // console.log("imgUrl->", imgUrl)
            downloadImg(imgUrl).then(() => {
                setLoading(false);
            }).catch((e) => {
                prompt.error("下载失败");
                setLoading(false);
            })
        }}
    >下载原图</Button>
}